<template>
    <div class="report-container">
        <ReportUpload :reportTemplateData="dyReport" ref="reportUploadRef" @exportReportData="exportReportData"
            @exportAiContent="exportAiContent">
            <template #reportContent>
                <!-- <ReportContent v-model:aiContent="aiContent" /> -->
                <el-input :rows="20" v-model="aiContent" type="textarea" placeholder="请输入内容" />
            </template>
        </ReportUpload>

        <div class="container" id="report-container">
            <TransactionAnalysis :merchantInfo="merchantInfo" :templateData="templateData" :aiContent="aiContent" />

        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import ReportUpload from '../components/ReportUpload.vue'
import TransactionAnalysis from '../components/TiktokReportNew/TransactionAnalysis.vue'
import dyReport from '../reportTemplate/dyReport'
import ReportContent from '../components/ReportContent.vue'
import type { AnalysisResult } from '../api'

// 模板显示控制变量
const showTemplate = ref(false)
const aiContent = ref<string | null>(``)
//     {
//     "一、核心问题梳理": [
//         "【官号视频成交金额为0且下降100%】，初步判断为【官号未发布新视频，内容更新停滞导致转化缺失】。",
//         "【达人视频成交金额下降61.23%】，可能与【达人合作策略调整或内容质量波动】有关。",
//         "【UGC视频播放量下降25%】，初步判断为【用户生成内容缺乏激励措施或互动引导】。",
//         "【直播相关数据全面为0】，可能与【直播活动未正常开展或数据采集异常】有关。"
//     ],
//     "二、运营方向建议": {
//         "模块": ["直播内容", "达人合作", "视频内容", "店员直播", "官号运营"],
//         "优化方向": ["重启直播排期，优先测试高转化品类", "筛选历史高转化达人恢复合作，优化分佣机制", "官号增加教程类视频，达人侧重种草内容", "制定店员直播SOP及话术模板", "官号每周至少更新3条互动性视频"]
//     },
//     "三、行动建议": {
//         "问题点": ["官号内容停滞", "达人转化下滑", "直播未开展"],
//         "推荐动作": [
//             ["运营组本周内制定官号视频发布排期表，由内容经理负责落实", "增加产品教程类视频占比至50%，预计提升粉丝粘性20%"],
//             ["筛选过去30天ROI超1:5的达人名单，3日内完成合约续签，由BD总监跟进", "优化达人佣金结构，对高转化视频额外奖励5%分成"],
//             ["明日启动测试直播，选择19:00-21:00时段，由运营组长监播", "首周聚焦3款爆品，单场GMV目标500元"]
//         ]
//     }
// })
const reportUploadRef = ref()
const templateData = ref(dyReport)
const merchantInfo = ref({ name: '', id: '' })
// {
// "一、核心问题梳理": [
// "【官号视频成交金额为0且下降100%】，初步判断为【官号未发布新视频，内容更新停滞导致转化缺失】。",
// "【达人视频成交金额下降61.23%】，可能与【达人合作策略调整或内容质量波动】有关。",
// "【UGC视频播放量下降25%】，初步判断为【用户生成内容缺乏激励措施或互动引导】。",
// "【直播相关数据全面为0】，可能与【直播活动未正常开展或数据采集异常】有关。"
// ],
// "二、运营方向建议": {
// "模块": ["直播内容", "达人合作", "视频内容", "店员直播", "官号运营"],
// "优化方向": ["重启直播排期，优先测试高转化品类", "筛选历史高转化达人恢复合作，优化分佣机制", "官号增加教程类视频，达人侧重种草内容", "制定店员直播SOP及话术模板", "官号每周至少更新3条互动性视频"]
// },
// "三、行动建议": {
// "问题点": ["官号内容停滞", "达人转化下滑", "直播未开展"],
// "推荐动作": [
// ["运营组本周内制定官号视频发布排期表，由内容经理负责落实", "增加产品教程类视频占比至50%，预计提升粉丝粘性20%"],
// ["筛选过去30天ROI超1:5的达人名单，3日内完成合约续签，由BD总监跟进", "优化达人佣金结构，对高转化视频额外奖励5%分成"],
// ["明日启动测试直播，选择19:00-21:00时段，由运营组长监播", "首周聚焦3款爆品，单场GMV目标500元"]
// ]
// }
// }
// {
//         "一、核心问题梳理": [
//             "【视频播放量下降18%】，可能与【新发布视频数量激增但内容质量不足】有关。",
//             "【直播间成交金额下降94.7%】，初步判断为【直播内容吸引力不足或选品策略失误】。",
//             "【UGC视频成交金额为0】，可能与【缺乏有效激励或内容引导】有关。",
//             "【达人视频播放量下降42.24%】，初步判断为【达人合作质量或内容形式需优化】。",
//             "【店员直播观看人数增长但转化率低】，可能与【直播互动和话术不足】有关。"
//         ],
//         "二、运营方向建议": {
//             "模块": [
//                 "直播内容",
//                 "达人合作",
//                 "视频内容",
//                 "店员直播",
//                 "官号运营"
//             ],
//             "优化方向": [
//                 "优化选品策略，提升直播内容吸引力",
//                 "筛选高转化达人，优化合作内容形式",
//                 "减少低效视频发布，聚焦高转化内容",
//                 "加强互动话术培训，优化直播节奏",
//                 "增加互动话题视频，提升粉丝粘性"
//             ]
//         },
//         "三、行动建议": {
//             "问题点": [
//                 "视频播放量下降",
//                 "直播间成交金额下降",
//                 "UGC视频成交金额为0",
//                 "达人视频播放量下降",
//                 "店员直播转化率低"
//             ],
//             "推荐动作": [
//                 [
//                     "筛选播放量高的视频类型，减少低效视频发布数量，由内容团队负责",
//                     "优化视频标题和封面，提升点击率，预期提升播放量10%"
//                 ],
//                 [
//                     "分析高转化直播场次，复制成功经验，由直播团队负责",
//                     "调整直播选品，增加高客单价商品比例，预期提升成交金额20%"
//                 ],
//                 [
//                     "设计UGC内容激励活动，鼓励用户发布高质量内容，由运营团队负责",
//                     "提供UGC内容模板和指导，提升内容质量，预期提升UGC成交金额"
//                 ],
//                 [
//                     "筛选播放量高的达人，优化合作内容形式，由达人合作团队负责",
//                     "增加达人视频互动环节，提升用户参与度，预期提升播放量15%"
//                 ],
//                 [
//                     "组织店员直播话术培训，提升互动能力，由培训团队负责",
//                     "优化直播节奏，增加促销环节，预期提升转化率5%"
//                 ]
//             ]
//         }
//     }

const exportReportData = (data: any) => {
    showTemplate.value = true
    templateData.value = data.matchedData
    merchantInfo.value = data.selectedMerchant.value
    console.log("🚀 ~ exportReportData ~ merchantInfo:", merchantInfo)
}

const exportAiContent = (data:string) => {
    // 输出当前传入的数据
    console.log("🚀 ~ exportAiContent ~ data:", data)
    aiContent.value = data
}
</script>

<style scoped>
.report-container {
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    height: calc(100vh - 60px);
    width: 100%;
    justify-content: space-between;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.progress-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 50px;
    width: 50%;
    background-color: #f0f0f0;
    border-radius: 10px;
    display: flex;
    align-items: center;
}

.progress {
    width: 100%;
}

.container {
    overflow-y: auto;
    margin: 0;
    background: white;
    border-radius: 5px;
    padding: 20px;
    width: 49vw;
    margin-left: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.section-title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.section-title .number {
    width: 24px;
    height: 24px;
    background: #FFB800;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-weight: bold;
}

.section-title h2 {
    margin: 0;
    font-size: 18px;
}

.data-card {
    background: #FFF5F5;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.data-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.data-item {
    flex: 1;
}

.data-label {
    font-size: 14px;
    color: #333;
    margin-bottom: 5px;
}

.data-value {
    font-size: 24px;
    color: #FF6B6B;
    font-weight: bold;
}

.data-trend {
    font-size: 14px;
    color: #FF6B6B;
}

.source-row {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.source-item {
    text-align: center;
    flex: 1;
}

.source-value {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
}

.source-label {
    font-size: 12px;
    color: #666;
}

.conversion-card {
    background: #FFF9F0;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.conversion-stats {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.conversion-item {
    flex: 1;
    text-align: center;
    padding: 10px;
    background: white;
    border-radius: 6px;
}

.data-analysis {
    margin-top: 20px;
    padding: 15px;
    background: #F8F9FA;
    border-radius: 8px;
}

.analysis-item {
    color: #FF4D4F;
    margin-bottom: 10px;
    font-size: 14px;
}

.highlight {
    color: #FF4D4F;
    font-weight: bold;
}

.store-analysis {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.store-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.stat-box {
    flex: 1;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    text-align: center;
}

.merchant-discount {
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-top: 15px;
}

.product-analysis {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
}

.product-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.product-item {
    display: flex;
    gap: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
}

.product-img {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    object-fit: cover;
}

.product-info {
    flex: 1;
}

.product-name {
    font-size: 16px;
    margin-bottom: 5px;
}

.product-price {
    color: #ff6b6b;
    font-weight: bold;
    margin-bottom: 10px;
}

.product-stats {
    display: flex;
    gap: 20px;
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat .label {
    font-size: 12px;
    color: #666;
}

.stat .value {
    font-size: 16px;
    font-weight: bold;
}

.highlight-orange {
    color: #ff6b6b;
}

.update-time {
    font-size: 12px;
    color: #666;
    margin-left: auto;
}

.score-card {
    background: #FFF9F0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.total-score {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.score-value {
    font-size: 36px;
    font-weight: bold;
    color: #FF6B6B;
    margin: 0 20px;
}

.medal-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.medal-icon {
    width: 24px;
    height: 24px;
}

.score-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.operation-advice {
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.advice-text {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 10px;
}

.pending-tasks {
    background: #fff;
    padding: 15px;
    border-radius: 8px;
}

.task-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.marketing-card,
.service-card {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.live-stats {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.stat-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
}

.competition-range {
    margin-top: 15px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 4px;
    font-size: 14px;
    color: #666;
}

.service-stats {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.star-rating-card {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.rating-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.rating-item {
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
}

.rating-item h3 {
    margin: 0 0 15px 0;
    font-size: 16px;
    color: #333;
}

.rating-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rating-value {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.rating-status {
    color: #666;
    font-size: 14px;
}

.rating-change {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
}

.from-value {
    color: #666;
}

.to-value {
    color: #333;
}

.change-value {
    font-size: 14px;
    color: #666;
}
</style>